<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {getAwardsAPi} from '@/api/user'
import {ElMessage} from "element-plus";
const awardData=ref({})
const tableData=ref({
  /**
   * id
   */
  id:0,

  /**
   * 获奖用户Id
   */
  userId:0,

  /**
   * 获奖等级
   */
  awardLevel:0,

  /**
   * 作品分组
   */
  workTeam:"",

  /**
   * 课程专业
   */
  workProfessional:"",

  /**
   * 参赛团队
   */
  joinTeam:"",

  /**
   * 所属学校
   */
  joinSchool:""

})

const getAward= ()=>{
  getAwardsAPi().then((res)=>{
    if(res.code===200&&res.data!==null){
      awardData.value=res.data
    }
  },(err)=>{
    ElMessage.error(err.errMsg?err.message:"暂无获奖信息")
  })
}
let firstData=ref([])
const secondData=ref([])
const thirdData=ref([])
const loadData=(data)=>{
  tableData.value={
    ...data
  }
}
const screenData=()=>{
  // 使用 Object.values() 获取对象集合中的每个对象


  if(tableData.value==null||undefined){
    return
  }
  const objectsArray = Object.values(tableData.value);
  objectsArray.forEach(obj => {
    if(obj.awardLevel==='1'){
      firstData.value.push(obj)
    }else if(obj.awardLevel==='2'){
      secondData.value.push(obj)
    }else if (obj.awardLevel==='3'){
      if (thirdData.value.length>=4){
        isMore4.value=true;
        isLess4.value=false;
      }
      thirdData.value.push(obj)
    }else {
      ElMessage.error("无获奖名单")
    }
  });

}
onMounted(()=>{

  getAward()


})
watch(awardData,(newData)=>{
  loadData(newData)
  screenData()
})
const options=[
  {
    lable:"思政课程组",
    value:"1"
  },
  {
    lable:"专业技能课程一组",
    value:"2"
  },
  {
    lable:"公共基础课程组(不含思政)",
    value:"3"
  },
  {
    lable:"专业技能课程二组",
    value:"4"
  }
]

const isLess4=ref(true)
const isMore4=ref(false)
</script>

<template>
  <div id="app" style="height: 100%;width: 100%">
    <div class="back">
      <div v-if="tableData!==null" class="body-text" style="height: 538px">
        <!--      <div v-if="1" class="body-text" style="height: 525px;overflow-y: scroll;">-->
        <!--  评奖区域      -->

        <div :class="[{less4:isLess4,more4:isMore4}]">
          <!--    一等奖    -->
          <div style="display: flex;flex-direction: row;">
            <div style="border-bottom: #ececec 2px solid;border-right: #ececec 2px solid;width: 248px">
              <div style="display: flex;
                  flex-direction: row;
                  justify-content: center;
                  align-items: center;">
                <div style="display: flex;flex-direction: row;margin-top: 25px">
                  <img style="width: 23px;height: 23px" src="../assets/1.png">
                  <text style="font-weight: bold;margin-left: 10px">一等奖</text>
                </div>

              </div>
            </div>
            <div  style="display: flex;flex-direction: column;border-bottom: #ececec 2px solid;border-right: #ececec 2px solid;padding: 10px 100px 10px 30px;border-left: 0px solid;width: 700px">
              <template v-for="first in firstData">
                <text style="font-size: 13px;font-weight: bold" >
                  <template v-for="option in options">
                    <template v-if="option.value===first.workTeam">
                      {{option.lable}}
                    </template>
                  </template>,{{first.workProfessional}}
                </text>
                <div style="display: flex;flex-direction: row;">
                  <text style="margin-top: 10px;color: #4682B4;font-size: 12px">{{first.joinSchool}}</text>
                  <text style="margin-top: 10px;margin-left: 20px;color: #4682B4;font-size: 12px">教学团队:{{first.joinTeam}}</text>
                </div>
              </template>
            </div>
          </div>
          <!--    二等奖    -->
          <div style="display: flex;flex-direction: row">
            <template v-for="second in secondData">
              <div style="border-bottom: #ececec 2px solid;border-right: #ececec 2px solid;border-top:0px solid;width: 248px;">
                <div style="display: flex;
                  flex-direction: row;
                  justify-content: center;
                  align-items: center;">
                  <div style="display: flex;flex-direction: row;margin-top: 25px">
                    <img style="width: 23px;height: 23px" src="../assets/2.png">
                    <text style="font-weight: bold;margin-left: 10px">二等奖</text>
                  </div>
                </div>
              </div>
              <div style="display: flex;flex-direction: column;border-bottom: #ececec 2px solid;border-right: #ececec 2px solid;border-top:0px solid;padding: 10px 100px 10px 30px;border-left: 0px solid;width: 700px">
                <text style="font-size: 13px;font-weight: bold">
                  <template v-for="option in options">
                    <template v-if="option.value===second.workTeam">
                      {{option.lable}}
                    </template>
                  </template>,
                  ,{{second.workProfessional}}</text>
                <div style="display: flex;flex-direction: row;">
                  <text style="margin-top: 10px;color: #4682B4;font-size: 12px">{{second.joinSchool}}</text>
                  <text style="margin-top: 10px;margin-left: 20px;color: #4682B4;font-size: 12px">教学团队:{{second.joinTeam}}</text>
                </div>
              </div>
            </template>

          </div>
          <!--    三等奖    -->
          <div style="display: flex;flex-direction: row">
            <div style="display: flex;flex-direction: row">
              <div style="display: flex;
                  flex-direction: row;
                  justify-content: center;
                  border-bottom: #ececec 2px solid;border-right: #ececec 2px solid;border-top:0px solid;width: 248px;">
                <div style="display: flex;flex-direction: row;margin-top: 25px">
                  <img style="width: 23px;height: 23px" src="../assets/3.png">
                  <text style="font-weight: bold;margin-left: 10px">三等奖</text>
                </div>
              </div>
              <!--     所有的三等奖    -->
              <div>
                <template v-for="third in thirdData">
                  <div  style="display: flex;flex-direction: column;border-bottom: #ececec 2px solid;border-right: #ececec 2px solid;border-top:0px solid;padding:10px 100px 10px 30px;border-left: 0px solid;width: 700px">
                    <text style="font-size: 13px;font-weight: bold">
                      <template v-for="option in options">
                        <template v-if="option.value===third.workTeam">
                          {{option.lable}}
                        </template>
                      </template>,
                      ,{{third.workProfessional}}</text>
                    <div style="display: flex;flex-direction: row;">
                      <text style="margin-top: 10px;color: #4682B4;font-size: 12px">{{third.joinSchool}}</text>
                      <text style="margin-top: 10px;margin-left: 20px;color: #4682B4;font-size: 12px">教学团队:{{third.joinTeam}}</text>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>

      </div>
      <el-empty v-else description="暂无获奖结果" style="height: 525px;"/>
      <!-- 底部 -->
      <div class="black-bottom">
        <text class="black-text" style="margin-top: 12px;" >如有使用问题，请联系唐工：17856424152</text>
        <text class="black-text" style="margin-bottom: 12px;" >Copyright ? 2003-2024 zhihuijiaoxue. All rights reserved.</text>
      </div>
    </div>

  </div>
</template>
<style scoped >

.more4{
  overflow-y: scroll;height: 500px;border:#ececec 2px solid;
}


.less4{
  /*overflow-y: scroll;height: 500px;border:#ececec 2px solid;*/
  display: flex;
  flex-direction: column;
  border-left: #ececec 2px solid;
  border-top: #ececec 2px solid;
}



.dropdown{

  margin-left: 10px;
  margin-top: 20px;
}

.example-showcase .el-dropdown-link {

  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.bottom{
  margin-top: 80px;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.black-text{

  color:#afafaf;
  font-size: 11px;

}

.black-bottom{
  margin-top: 75px;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




.body-text{
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 3%;
  padding-bottom: 3%;
  margin-left: 15%;
  margin-right: 15%;

}

.back{
  width:100%;
  padding-top: 1.2%;
  background: #ececec;
}

.menu{
  overflow: hidden;
  width: 580px;
}
.top{

  border-bottom: 2px solid;
  border-bottom-color: #D3D3D3;
  display: flex;
  width: 100%;
  height: 60px;
}

.icon{


  margin-left: 240px;
  margin-right: 35px;
}

.el-menu-popper-demo{
  transform: rotateX(180deg);
}

.top-text{
  transform: rotateX(180deg);
}

.top-button{

  margin-top: 10px;
  margin-left: 50px;
}
</style>